<template>
	<view>
		<!-- <view :class="[isShowShop != 0 ? 'userIcon-poster-move':'userIcon-poster-no','userIcon-poster']"
			@click="createPoster">
			生成海报
		</view>
		<view class="mask w-100vw h-100vh" v-if="posterShow"></view>
		<poster ref="posterRef" @closePost="closePost" v-show="posterShow"></poster> -->
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from "vue"
	import {
		generatePosterApi
	} from '../../http';
	import poster from '../../components/PosterSmall.vue';
	const emit = defineEmits(['openlogin'])
	const props = defineProps({
		// 列表数据
		id: {
			default: '',
			type: String,
		},
		isShowShop: {
			default: 3,
			type: Number,

		}
	})
	// 生成海报
	const posterRef = ref()
	const posterShow = ref(false)
	const createPoster = () => {
		if (!uni.getStorageSync('AlertLogin')) {
			emit('openlogin')
			return
		}
		uni.showLoading({
			title: '绘制中...',
			mask: true
		});
		generatePosterApi(props.id).then(res => {
			posterShow.value = true;
			uni.hideLoading()
			setTimeout(() => {
				posterRef.value.drawPoster(res); //在组件内drawPoster()函数编写需要绘制的内容
			}, 10);
		}).catch(err => {
			uni.showToast({
				title: '绘制失败',
				duration: 2000,
				icon: 'none'
			})
			uni.hideLoading()
		})
	}
	const closePost = () => {
		posterShow.value = false;
	}
	
</script>

<style lang="scss">
	.userIcon-poster {
		height: 60rpx;
		border-radius: 0 30rpx 30rpx 0;
		padding-right: 14rpx;
		position: fixed;
		left: 0;
		z-index: 999;
		background: rgba(255, 255, 255, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.userIcon-poster-move {
		top: 62%;
	}

	.userIcon-poster-no {
		top: 56%;
	}

	.mask {
		position: fixed;
		top: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.7);
	}
</style>